window.addEventListener('load',function() {
    // 1 获取元素
  var arrow_1 = document.querySelector('.arrow-1');
  var arrow_2 = document.querySelector('.arrow-2');
  var focus = document.querySelector('.focus');

  var focusWidth = focus.offsetWidth;
//   2鼠标经过盒子箭头显示与隐藏
  focus.addEventListener('mouseenter', function() {
      arrow_1.style.display = 'block';
      arrow_2.style.display = 'block';
      clearInterval(timer);
    //   timer = null; 清除定时器变量
  })
  focus.addEventListener('mouseleave', function() {
    arrow_1.style.display = 'none';
    arrow_2.style.display = 'none';
    timer = setInterval(function() {
        // 手动调用 点击事件
        arrow_2.click();
    },2000);
})

// 3动态生成小圆圈 有几张图片生成几个小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
for(var i = 0; i < ul.children.length; i++){
    // 创建一个小li
    var li = document.createElement('li');
// 记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index',i);
    // 把小li插入到ol里面
    ol.appendChild(li);
    // 4 小圆圈的排他思想我们可以直接在生成小圆圈的同时直接绑定点击事件
    li.addEventListener('click',function(){
        // 干掉所有人 就是把所有小li的 current 类名清除
       for(var i = 0; i < ol.children.length ; i++){
           ol.children[i].className = '';
       }
        // 留下我自己
        this.className = 'current';

        // 5 点击小圆圈 图片会移动 ul 移动
        // ul的移动距离 小圆圈的索引号 乘以图片的宽度 是负值 往左走
        // 当我们点击了小圆圈就拿到小圆圈li的索引号
        var  index = this.getAttribute('index');
        // 当我们点击了某个小li 就把这个小li 索引号给 num   这两个是解决 小圆圈点击跳的 bug
        num = index;
        // 当我们点击了某个小li 就把这个小li 索引号给 circle
        circle = index;
        // 把它提为全局变量 后面函数也要用
        // var focusWidth = focus.offsetWidth;
        // console.log(index);
        // console.log(focusWidth);
       han(ul,-index * focusWidth);
    })
}
ol.children[0].className = 'current';
// 6 克隆第一张图片 放到ul最后面
var first = ul.children[0].cloneNode(true); // true 是深克隆  flase 是浅克隆
ul.appendChild(first);
// 7 点击按钮一次图片滚动一下
var num = 0;
var circle = 0;
var flag = true; //节流阀
// 右侧按钮
arrow_2.addEventListener('click',function() {
if(flag){
    flag = false; //关闭节流阀
    // 如果走到最后复制一张图片 此时 我们的ul要快速复原  left 改为0
    if(num == ul.children.length-1){
        ul.style.left = 0;
        num = 0;
    }
    num++;
    han(ul, -num * focusWidth ,function(){
        flag = true;
    } );
// 8 点击右侧按钮 小圆圈跟着一起变化 可以在声明一个变量控制小圆圈的播放
    circle++;
// 如果 走到了 circle==3 的位置  说明走到了克隆的位置 我们就复原
    if(circle == ol.children.length){
        circle = 0;
    }
    // 调用函数
    circleChange();
}
})

// 9 左侧按钮
arrow_1.addEventListener('click',function() {
    if(flag){
        flag = false;
        // 如果走到最后复制一张图片 此时 我们的ul要快速复原  left 改为0
        if(num == 0){
            num = ul.children.length - 1;
            ul.style.left = -num * offsetWidth + 'px';
           
        }
        num--;
        han(ul, -num * focusWidth ,function() {
            flag = true;
        } );
    // 8 点击右侧按钮 小圆圈跟着一起变化 可以在声明一个变量控制小圆圈的播放
        circle--;
    // 如果 走到了 circle < 0 的位置  说明走到了第一张的位置 小圆圈改为第三个
        if(circle < 0){
            circle = ol.children.length - 1;
        }
         // 调用函数
        circleChange();
    }
    })

    function circleChange(){
        // 先清除小圆圈的current类名
        for(var i = 0; i < ol.children.length; i++ ){
            ol.children[i].className = '';
        }
        // 留下当前小圆圈的current类名
        ol.children[circle].className = 'current';
    }
    // 10 自动播放功能
    var timer = setInterval(function() {
        // 手动调用 点击事件
        arrow_2.click();
    },2000)
})




